<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2006"
    >

  <!-- This is the style for most borders -->
  <Style x:Key="BorderStyle" TargetType="{x:Type Border}">
    <Setter Property="BorderThickness" Value="{DynamicResource BorderThickness}"/>
    <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
    <Setter Property="CornerRadius" Value="10,10,10,10"/>
  </Style>

  <!-- This is the default style for all labels -->
  <Style TargetType="{x:Type Label}">
    <Setter Property="Foreground" Value="{DynamicResource FontColor}"/>
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="Padding" Value="{DynamicResource LabelPadding}"/>
    <Setter Property="FontFamily" Value="Calibri"/>
    <Setter Property="FontSize" Value="13"/>
  </Style>

  <!-- This is the default style for all textblocks -->
  <Style TargetType="{x:Type TextBlock}">
    <Setter Property="FontFamily" Value="Calibri"/>
  </Style>

  <!-- This is the default style for all radio buttons -->
  <Style TargetType="{x:Type RadioButton}">
    <Setter Property="Foreground" Value="{DynamicResource FontColor}"/>
  </Style>

  <!-- This is the style for the avatar textblock text -->
  <Style x:Key="AvatarTextBlockStyle" TargetType="{x:Type TextBlock}">
    <Setter Property="Foreground" Value="{DynamicResource FontColor}"/>
  </Style>

  <!-- This is the style for the list of photos on the PersonInfo control -->
  <Style x:Key="PhotosListStyle" TargetType="{x:Type ListBox}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListBox}" >
          <ScrollViewer
            VerticalScrollBarVisibility="Disabled"
            HorizontalScrollBarVisibility="Disabled" Margin="5,5,5,5">
            <WrapPanel IsItemsHost="True" VerticalAlignment="Top" />
          </ScrollViewer>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- This is the style for the photo containers in the list of photos on the PersonInfo control -->
  <Style x:Key="PhotosListItemStyle" TargetType="{x:Type ListBoxItem}">
    <Setter Property="Margin" Value="0,0,10,10"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListBoxItem}">
          <Grid SnapsToDevicePixels="true">
            <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
          </Grid>
          <ControlTemplate.Triggers>
            <!-- Change IsSelected background to set the selection color for the photos -->
            <Trigger Property="IsSelected" Value="true">
              <Setter Property="Background" Value="#FFFFFF" TargetName="Border"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- This is the style for the list of tags on the Person Info control -->
  <Style x:Key="TagsListStyle" TargetType="{x:Type ListBox}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListBox}" >
          <ScrollViewer
            VerticalScrollBarVisibility="Disabled"
            HorizontalScrollBarVisibility="Disabled" Margin="5,5,5,5">
            <WrapPanel IsItemsHost="True" />
          </ScrollViewer>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <ControlTemplate x:Key="FamilyListViewItemTemplate" TargetType='{x:Type ListViewItem}'>
    <Grid SnapsToDevicePixels="True" Margin="0,3,0,0">
      <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
      <GridViewRowPresenter TextBlock.Foreground="{DynamicResource ListViewFontColor}" TextBlock.FontSize="11" Content="{TemplateBinding Content}" Columns="{TemplateBinding GridView.ColumnCollection}"/>
    </Grid>
    <ControlTemplate.Triggers>
      <!-- Change IsSelected SelectedListBoxBrush to set the selection color for the items -->
      <Trigger Property="IsSelected" Value="true">
        <Setter Property="Background" Value="{DynamicResource SelectedListBoxBrush}" TargetName="Border"/>
      </Trigger>
    </ControlTemplate.Triggers>
  </ControlTemplate>

  <Style x:Key="FamilyListViewStyle" TargetType="ListView">
    <Setter Property="Margin" Value="0,2,0,0"/>
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="ListView">
          <Border Name="Border">
            <ScrollViewer Style="{DynamicResource
                        {x:Static GridView.GridViewScrollViewerStyleKey}}">
              <ItemsPresenter />
            </ScrollViewer>
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style TargetType="{x:Type GridViewColumnHeader}">
    <Setter Property="GridViewColumnHeader.Template">
      <Setter.Value>
        <ControlTemplate>
          <TextBlock Margin="2,0,0,2" Text="{TemplateBinding GridViewColumnHeader.Content}" TextAlignment="Left" VerticalAlignment="Center" Foreground="{DynamicResource GridHeaderFontColor}" />
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style x:Key="NameGridViewColumnHeader" TargetType="{x:Type GridViewColumnHeader}">
    <Setter Property="GridViewColumnHeader.Template">
      <Setter.Value>
        <ControlTemplate>
          <TextBlock Margin="4,0,0,2" Text="{TemplateBinding GridViewColumnHeader.Content}" TextAlignment="Left" VerticalAlignment="Center" Foreground="{DynamicResource GridHeaderFontColor}" />
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style x:Key="HeaderStyle" TargetType="{x:Type TextBlock}">
    <Setter Property="FontFamily" Value="Calibri"/>
    <Setter Property="FontSize" Value="18"/>
    <Setter Property="Foreground" Value="{DynamicResource FontColor}"/>
    <Setter Property="Margin" Value="10,0,10,10"/>
  </Style>

  <Style x:Key="SectionHeaderStyle" TargetType="{x:Type TextBlock}">
    <Setter Property="TextWrapping" Value="NoWrap"/>
    <Setter Property="TextTrimming" Value="None"/>
    <Setter Property="Foreground" Value="{DynamicResource FontColor}"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="FontFamily" Value="Calibri"/>
    <Setter Property="FontSize" Value="13"/>
  </Style>

  <Style x:Key="DetailsBorderStyle" TargetType="{x:Type Border}">
    <Setter Property="CornerRadius" Value="10,10,10,10"/>
    <Setter Property="BorderThickness" Value="1,1,1,1"/>
    <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
    <Setter Property="Margin" Value="10,10,10,0"/>
    <Setter Property="Padding" Value="5,5,5,5"/>
    <Setter Property="Background" Value="#FF262626"/>
  </Style>

  <Style x:Key="NormalButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Foreground" Value="#FFFFFF" />
    <Setter Property="Width" Value="60"/>
    <Setter Property="Height" Value="20"/>
    <Setter Property="FontSize" Value="10"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
          <Grid>
            <Rectangle x:Name="Rectangle" Stroke="#FF051F42" StrokeMiterLimit="1.000000" StrokeThickness="0.500000" RadiusX="5" RadiusY="5">
              <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.501,0.039" StartPoint="0.501,0.971">
                  <GradientStop Color="#FF1F317D" Offset="0.101"/>
                  <GradientStop Color="#FF1F317D" Offset="0.49"/>
                  <GradientStop Color="#FF6C8EBD" Offset="0.51"/>
                  <GradientStop Color="#FF283D8C" Offset="0"/>
                  <GradientStop Color="#FF7094C7" Offset="0.986"/>
                </LinearGradientBrush>
              </Rectangle.Fill>
            </Rectangle>
            <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="IsKeyboardFocused" Value="true"/>
            <Trigger Property="IsMouseOver" Value="true">
              <Setter Property="Fill" TargetName="Rectangle">
                <Setter.Value>
                  <LinearGradientBrush EndPoint="0.501,0.039" StartPoint="0.501,0.971">
                    <GradientStop Color="#FF2C558C" Offset="0.101"/>
                    <GradientStop Color="#FF1F317D" Offset="0.49"/>
                    <GradientStop Color="#FF9DB5D7" Offset="0.51"/>
                    <GradientStop Color="#FF244AAF" Offset="0"/>
                    <GradientStop Color="#FF87A4D9" Offset="0.986"/>
                  </LinearGradientBrush>
                </Setter.Value>
              </Setter>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style x:Key="BlackButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource NormalButtonStyle}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
          <Grid>
            <Rectangle Stroke="#FF000000" StrokeMiterLimit="1.000000" StrokeThickness="0.500000" RadiusX="5" RadiusY="5" x:Name="rectangle">
              <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.501,0.039" StartPoint="0.501,0.971">
                  <GradientStop Color="#FF1E1E1E" Offset="0.101"/>
                  <GradientStop Color="#FF1E1E1E" Offset="0.49"/>
                  <GradientStop Color="#FF5B5959" Offset="0.51"/>
                  <GradientStop Color="#FF2F2F2F" Offset="0"/>
                  <GradientStop Color="#FF5B5959" Offset="0.986"/>
                </LinearGradientBrush>
              </Rectangle.Fill>
            </Rectangle>
            <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="IsKeyboardFocused" Value="true"/>
            <Trigger Property="IsMouseOver" Value="true">
              <Setter Property="Fill" TargetName="rectangle">
                <Setter.Value>
                  <LinearGradientBrush EndPoint="0.501,0.039" StartPoint="0.501,0.971">
                    <GradientStop Color="#FF3A3A3A" Offset="0.101"/>
                    <GradientStop Color="#FF1E1E1E" Offset="0.49"/>
                    <GradientStop Color="#FFB0B0B0" Offset="0.51"/>
                    <GradientStop Color="#FF656565" Offset="0"/>
                    <GradientStop Color="#FF989898" Offset="0.938"/>
                    <GradientStop Color="#FF7F7F7F" Offset="0.986"/>
                  </LinearGradientBrush>
                </Setter.Value>
              </Setter>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style x:Key="RedButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource NormalButtonStyle}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
          <Grid>
            <Rectangle Stroke="#FF570606" StrokeMiterLimit="1.000000" StrokeThickness="0.500000" RadiusX="5" RadiusY="5" x:Name="rectangle">
              <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.501,0.039" StartPoint="0.501,0.971">
                  <GradientStop Color="#FF860E0E" Offset="0.101"/>
                  <GradientStop Color="#FF9C0F0F" Offset="0.49"/>
                  <GradientStop Color="#FFD17575" Offset="0.51"/>
                  <GradientStop Color="#FFA41313" Offset="0"/>
                  <GradientStop Color="#FFD57777" Offset="0.986"/>
                </LinearGradientBrush>
              </Rectangle.Fill>
            </Rectangle>
            <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="IsKeyboardFocused" Value="true"/>
            <Trigger Property="IsMouseOver" Value="true">
              <Setter Property="Fill" TargetName="rectangle">
                <Setter.Value>
                  <LinearGradientBrush EndPoint="0.501,0.039" StartPoint="0.501,0.971">
                    <GradientStop Color="#FF9E4E4E" Offset="0.101"/>
                    <GradientStop Color="#FF9C0F0F" Offset="0.49"/>
                    <GradientStop Color="#FFE79C9C" Offset="0.51"/>
                    <GradientStop Color="#FF656565" Offset="0"/>
                    <GradientStop Color="#FFE57E7E" Offset="0.986"/>
                  </LinearGradientBrush>
                </Setter.Value>
              </Setter>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!--This sets the default style for all buttons-->
  <Style TargetType="{x:Type Button}" BasedOn="{StaticResource NormalButtonStyle}"/>

  <!-- Repeat Button Style - This is used by ScrollBar for the up and down buttons -->
  <Style x:Key="RepeatButtonStyle" TargetType="{x:Type RepeatButton}" BasedOn="{x:Null}">
    <Setter Property="Background" Value="{DynamicResource NormalBrush}"/>
    <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrush}"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type RepeatButton}">
          <Grid>
            <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
            <ContentPresenter HorizontalAlignment="Center" x:Name="ContentPresenter" VerticalAlignment="Center" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"/>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="IsKeyboardFocused" Value="true">
              <Setter Property="BorderBrush" Value="{DynamicResource DefaultedBorderBrush}" TargetName="Border"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="true">
              <Setter Property="Background" Value="{DynamicResource PressedBrush}" TargetName="Border"/>
              <Setter Property="BorderBrush" Value="{DynamicResource PressedBorderBrush}" TargetName="Border"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="false">
              <Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border"/>
              <Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border"/>
              <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- Thumb Style - The Thumb is the draggable part of the Scrollbar -->
  <Style x:Key="ThumbStyle" TargetType="{x:Type Thumb}" BasedOn="{x:Null}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Thumb}">
          <Grid Margin="0,0,0,0" x:Name="Grid">
            <Rectangle HorizontalAlignment="Stretch" x:Name="Rectangle" VerticalAlignment="Stretch" Width="Auto" Height="Auto" RadiusX="2" RadiusY="2" Fill="#FF414C6F" Stroke="#FFFFFFFF"/>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="IsFocused" Value="True"/>
            <Trigger Property="IsMouseOver" Value="True"/>
            <Trigger Property="IsEnabled" Value="False"/>
            <Trigger Property="IsDragging" Value="True"/>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- ScrollRepeatButton Style - This RepeatButton is used above and below the Thumb in the Scrollbar. They are set to transparent si that they do not show over the scrollbar -->
  <Style x:Key="ScrollRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="Focusable" Value="false"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type RepeatButton}">
          <Grid>
            <Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- ScrollBar  This makes use of Thumb, RepeatButton and ScrollRepeatButton -->
  <Style TargetType="{x:Type ScrollBar}">
    <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ScrollBar}">
          <Grid x:Name="GridRoot" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
            <Grid.RowDefinitions>
              <RowDefinition MaxHeight="18"/>
              <RowDefinition Height="0.00001*"/>
              <RowDefinition MaxHeight="18"/>
            </Grid.RowDefinitions>

            <RepeatButton x:Name="DecreaseRepeat" Style="{DynamicResource RepeatButtonStyle}" Command="ScrollBar.LineUpCommand" Background="{x:Null}" BorderBrush="{x:Null}" BorderThickness="0,0,0,0">
              <Grid>
                <Path x:Name="DecreaseArrow" StrokeThickness="1" Data="M 0 4 L 8 4 L 4 0 Z" RenderTransformOrigin="0.5,0.5" Stroke="#FFFFFFFF" Margin="0.75,0,-0.757,0"/>
              </Grid>
            </RepeatButton>

            <!-- Track is a special layout container which sizes the thumb and the repeat button which do jump scrolling either side of it -->
            <Track Grid.Row="1" x:Name="PART_Track" Orientation="Vertical" IsDirectionReversed="true">
              <Track.Thumb>
                <Thumb Style="{DynamicResource ThumbStyle}" Width="10"/>
              </Track.Thumb>
              <Track.IncreaseRepeatButton>
                <RepeatButton x:Name="PageUp" Style="{DynamicResource ScrollRepeatButtonStyle}" Command="ScrollBar.PageDownCommand"/>
              </Track.IncreaseRepeatButton>
              <Track.DecreaseRepeatButton>
                <RepeatButton x:Name="PageDown" Style="{DynamicResource ScrollRepeatButtonStyle}" Command="ScrollBar.PageUpCommand"/>
              </Track.DecreaseRepeatButton>
            </Track>

            <RepeatButton Grid.Row="2" x:Name="IncreaseRepeat" Style="{DynamicResource RepeatButtonStyle}" Command="ScrollBar.LineDownCommand" Background="{x:Null}" BorderBrush="{x:Null}" BorderThickness="0,0,0,0">
              <Grid>
                <Path x:Name="IncreaseArrow" StrokeThickness="1" Data="M 0 0 L 4 4 L 8 0 Z" RenderTransformOrigin="0.5,0.5" Stroke="#FFFFFFFF" Margin="0.75,0,-0.757,0"/>
              </Grid>
            </RepeatButton>
          </Grid>

          <!-- This uses a single template for ScrollBar and rotate it to be Horizontal
					It also changes the commands so that the it does Left and Right instead of Up and Down Commands -->
          <ControlTemplate.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">

              <!-- Rotate the ScrollBar from Vertical to Horizontal -->
              <Setter Property="LayoutTransform" TargetName="GridRoot">
                <Setter.Value>
                  <RotateTransform Angle="-90"/>
                </Setter.Value>
              </Setter>

              <!-- Track is bound to Orientation internally, so we need to rotate it back to Vertical -->
              <Setter TargetName="PART_Track" Property="Orientation" Value="Vertical"/>

              <!-- Change the commands to do Horizontal commands -->
              <Setter Property="Command" Value="ScrollBar.LineLeftCommand" TargetName="DecreaseRepeat"/>
              <Setter Property="Command" Value="ScrollBar.LineRightCommand" TargetName="IncreaseRepeat"/>
              <Setter Property="Command" Value="ScrollBar.PageLeftCommand" TargetName="PageDown"/>
              <Setter Property="Command" Value="ScrollBar.PageRightCommand" TargetName="PageUp"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- User for styling the foreground color, applied to all MenuItems  -->
  <Style TargetType="{x:Type MenuItem}">
    <Setter Property="Foreground" Value="#FFFFFFFF"/>
  </Style>

  <!-- Main Menu - This template uses a StackPanel to layout MenuItems -->
  <Style x:Key="MenuStyle" TargetType="{x:Type Menu}">
    <Setter Property="Background" Value="{x:Null}"/>
    <Setter Property="BorderBrush" Value="{DynamicResource MenuBorderBrush}"/>
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Menu}">
          <Grid>
            <Border Margin="1" x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
            <StackPanel Background="{TemplateBinding Background}" IsItemsHost="True" ClipToBounds="True" Orientation="Horizontal"/>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled" Value="False">
              <Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border"/>
              <Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- MenuItem - The template uses triggers to provide four different arrangements of menu item which are set via the Role property -->
  <Style x:Key="MenuItemStyle" TargetType="{x:Type MenuItem}">
    <Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{DynamicResource FontColor}"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type MenuItem}">
          <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{x:Null}" BorderThickness="1,1,1,1" CornerRadius="3,3,3,3" Margin="0,0,10,0">
            <Grid>

              <!-- The Grid is used to hold together columns for an Content and Arrow to show the next level
							 Size sharing is used in Grid so that the Icon, Content, Arrow for each MenuItem align together -->
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="14"/>
              </Grid.ColumnDefinitions>

              <!-- Content for the menu text etc -->
              <ContentPresenter Margin="{TemplateBinding Padding}" x:Name="HeaderHost" RecognizesAccessKey="True" ContentSource="Header"/>

              <!-- Arrow drawn path which points to the next level of the menu -->
              <Grid Grid.Column="1" Margin="0,0,6,0" x:Name="ArrowPanel" VerticalAlignment="Center">
                <Path x:Name="ArrowPanelPath" Fill="{TemplateBinding Foreground}" VerticalAlignment="Center" Data="M-1.0089707E-11,0.0050000012 L8.03125,-3.5155176E-24 3.9995833,4.095 z" Height="4.095"/>
              </Grid>

              <!-- The Popup is the body of the menu which expands down or across depending on the level of the item -->
              <Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" x:Name="SubMenuPopup" Focusable="false" AllowsTransparency="true" VerticalOffset="0" PopupAnimation="Slide">
                <Grid x:Name="SubMenu">
                  <Border x:Name="SubMenuBorder" Background="{DynamicResource PopupMenuBackgroundBrush}" BorderBrush="{DynamicResource SolidBorderBrush}" BorderThickness="1"/>
                  <!-- StackPanel holds children of the menu. This is set bu IsItemsHost=True -->
                  <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/>
                </Grid>
              </Popup>

            </Grid>
          </Border>

          <!-- These triggers re-configure the four arrangements of MenuItem to show different levels of menu via Role -->
          <ControlTemplate.Triggers>

            <!-- Role = TopLevelHeader : this is the root menu item in a menu; the Popup expands down -->
            <Trigger Property="Role" Value="TopLevelHeader">
              <Setter Property="Margin" Value="0,1,0,1"/>
              <Setter Property="Padding" Value="6,3,6,3"/>
              <Setter Property="Placement" Value="Bottom" TargetName="SubMenuPopup"/>
            </Trigger>

            <!-- Role = TopLevelItem :  this is a child menu item from the top level without any child items-->
            <Trigger Property="Role" Value="TopLevelItem">
              <Setter Property="Margin" Value="0,1,0,1"/>
              <Setter Property="Padding" Value="6,3,6,3"/>
              <Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
            </Trigger>

            <!-- Role = SubMenuHeader : this is a child menu item which does not have children -->
            <Trigger Property="Role" Value="SubmenuHeader">
              <Setter Property="DockPanel.Dock" Value="Top"/>
              <Setter Property="Padding" Value="0,2,0,2"/>
              <Setter Property="Grid.IsSharedSizeScope" Value="true"/>
            </Trigger>

            <!-- Role = SubMenuItem : this is a child menu item which has children-->
            <Trigger Property="Role" Value="SubmenuItem">
              <Setter Property="DockPanel.Dock" Value="Top"/>
              <Setter Property="Padding" Value="0,2,0,2"/>
              <Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
            </Trigger>
            <Trigger Property="IsSuspendingPopupAnimation" Value="true">
              <Setter Property="PopupAnimation" Value="None" TargetName="SubMenuPopup"/>
            </Trigger>

            <Trigger Property="AllowsTransparency" SourceName="SubMenuPopup" Value="true">
              <Setter Property="Margin" Value="0,0,3,3" TargetName="SubMenu"/>
              <Setter Property="SnapsToDevicePixels" Value="true" TargetName="SubMenu"/>
              <Setter Property="BitmapEffect" Value="{DynamicResource PopupDropShadow}" TargetName="SubMenuBorder"/>
            </Trigger>

            <!-- Using the system colors for the Menu Highlight and IsEnabled-->
            <Trigger Property="IsHighlighted" Value="true">
              <Setter Property="Background" TargetName="Border" Value="{DynamicResource MenuIsHighlightedBrush}"/>
              <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
              <Setter Property="BorderBrush" TargetName="Border" Value="#FF000000"/>
            </Trigger>

            <Trigger Property="IsKeyboardFocused" Value="true">
              <Setter Property="Background" TargetName="Border" Value="{DynamicResource MenuPressedBrush}"/>
            </Trigger>

            <Trigger Property="IsPressed" Value="true">
              <Setter Property="Background" TargetName="Border" Value="{DynamicResource MenuPressedBrush}"/>
            </Trigger>

            <Trigger Property="IsEnabled" Value="false">
              <Setter Property="Foreground" Value="{DynamicResource DisabledMenuForegroundBrush}"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

</ResourceDictionary>